<html>

<head>
    <title>position</title>

    <style>
        .pos-relative {
            display: inline-flex;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 10px;
        }

        .b2 {
            background-color: darkblue;
            position: relative;
            top: 40px;
            left: 40px;
        }

        #one {
            position: fixed;
            top: 80px;
            left: 10px;
        }

        .outer {
            width: 500px;
            height: 300px;
            overflow: scroll;
            padding-left: 150px;
        }

        .pos-sticky {
            width: 500px;
            height: 100px;
            overflow: scroll;
        }
        dt {
            background-color: #b8c1c8;
            position: sticky;
            top: -1px;
            padding: 5px 20px;
            font-size: 20px;
            color: #fff;
            border-top: 1px solid;
        }
        dl {
            font-size: 25px;
            padding: 5px 20px;
            border-top: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <!-- <div class="pos-relative">
        <div class="box b1"></div>
        <div class="box b2"></div>
        <div class="box b3"></div>
        <div class="box b4"></div>
    </div> -->


    <div class="outer">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
            eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
            et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
            laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
            Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
            arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
            sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
            aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
            maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
            finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
            ultrices ultrices, tempor et tellus.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
            eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
            et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
            laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
            Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
            arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
            sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
            aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
            maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
            finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
            ultrices ultrices, tempor et tellus.
        </p>
        <div class="box" id="one">One</div>
    </div>


    <div class="pos-sticky">
        <dl>
          <dt>A</dt>
          <dd>Andrew W.K.</dd>
          <dd>Apparat</dd>
          <dd>Arcade Fire</dd>
          <dd>At The Drive-In</dd>
          <dd>Aziz Ansari</dd>
        </dl>
        <dl>
          <dt>C</dt>
          <dd>Chromeo</dd>
          <dd>Common</dd>
          <dd>Converge</dd>
          <dd>Crystal Castles</dd>
          <dd>Cursive</dd>
        </dl>
        <dl>
          <dt>E</dt>
          <dd>Explosions In The Sky</dd>
        </dl>
        <dl>
          <dt>T</dt>
          <dd>Ted Leo & The Pharmacists</dd>
          <dd>T-Pain</dd>
          <dd>Thrice</dd>
          <dd>TV On The Radio</dd>
          <dd>Two Gallants</dd>
        </dl>
      </div>
</body>

</html>